<template>
  <div style="width: 900px;margin-left: 12px">
    <div style="margin: 0 5px">
      <el-row
          v-for="tr in trainingList"
          :key="tr.id"
          style="margin-bottom: 35px;border-bottom: 1px solid;padding-bottom: 15px;">
        <el-col :span="5">
          <div class="grid-content ep-bg-purple">
            <el-image
                :src="tr.cover"
                style="height: 105px;width: 180px"></el-image>
          </div>
        </el-col>
        <el-col :span="17" style="margin-left: 15px;">
          <div class="grid-content ep-bg-purple-light">
            <div style="margin-bottom: 25px">
              <a style="cursor:pointer" :href="`https://www.dance365.com/detail/training?id=${tr.id}`" target="_blank">{{ tr.planName }}</a>
            </div>
            <div> 已练习0次0分钟</div>
          </div>
        </el-col>
        <el-col :span="1">
          <div class="grid-content ep-bg-purple">
            <div class="status">
              <svg class="icon" aria-hidden="true" style="font-size: 30px">
                <use xlink:href="#icon-time"></use>
              </svg>
              <div class="detail-light">未开始</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>


<script setup lang="ts">
import {onMounted, ref} from "vue";
import {getTrainingPage} from "@/api/trainingRoom";
import {ElMessage} from "element-plus";

const trainingList = ref([])
const initTrainingList = async () => {
  try {
    const res = await getTrainingPage()
    // console.log(555, res.data.content)
    trainingList.value = res.data.content
  } catch (error) {
    console.log(error)
    ElMessage.error('获取练习室失败')
  }
}
onMounted(() => {
  initTrainingList()
})
</script>

<style scoped>
.loadMoreList {
  -webkit-box-pack: start;
  margin-left: auto;
  margin-right: auto;
}

.status {
  width: 50px;
  line-height: 40px;
  text-align: center;
}
</style>
